<template>
	<div class="feedback_box">
		<div class="feedback_top">
			<h3>反馈信息</h3>
			<textarea name="" rows="" cols="" v-model="text" placeholder="请填问题反馈的详细信息"></textarea>
			<div class="feedback_btn">
				<button @click="feedbackclick">确认反馈</button>
			</div>
		</div>
		<div class="feedback_bottom">
			<ul class="feedback_ul">
				<li class="feedback_li" v-for="(item,index) in list" :key="index">
					<p>{{item.created_at}}</p>
					<p>留言：{{item.content}}</p>
					
					<div class="reply" v-if="item.reply">
						<p v-if="item.replyed_at">{{item.replyed_at}}</p>
						<p >客服回复：{{item.reply}}</p>
					</div>

				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				list: [],

				
			}
		},
		// 模板渲染之前请求
		created() {
			this.getList()
		},
		methods: {
			//发送请求
			feedbackclick() {
				this.http
					.post("/api/member/feedback", {
						content: this.text
					})
					.then(res => {
						if(res.status_code == 200) {
							this.getList();
							this.text = "";

						} else {
							this.$toast(res.message);
						}
					})
			},
			// 获取下面列表
			getList() {
				this.http.get("/api/feedback/info").then(res => {
					console.log(res);
					if(res.status_code == 200) {
						this.list = res.data;
					} else {
						this.$toast(res.message);
					}
				});
			}
		}
	}
</script>

<style scoped="scoped">
	@import url("../../assets/css/ttcp/feedback.css");
	.reply{margin-top: 0.3rem;}
</style>